<template>
	<page-meta :root-font-size="`${fontSize}px`"></page-meta>
  <view class="home-navigator">
    <view
      @click="goNavigate(item)"
      hover-class="navigator-hover"
      class="list-item"
      v-for="(item, index) in list"
      :key="index"
    >
      <image
        :src="item.pic"
        mode=""
        :class="{ disabled: item.disabled }"
      ></image>
      <view class="label">
        {{ item.label }}
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      list: [
        {
          label: "便民服务中心",
          pic: "../../static/icon/yanshou.png",
          navigateTo: "/activity/serviceCenter/serviceCenter",
        },
        // {
        //   label: "热点新闻",
        //   pic: "../../static/icon/jilu.png",
        //   navigateTo: "/activity/hotNews/hotNews",
        // },
        {
          label: "防疫知识",
          pic: "../../static/icon/jilu.png",
          navigateTo: "/activity/prevent/prevent",
        },
      ],
    };
  },
  computed: {
		...mapState(['fontSize'])
	},
  methods: {
    goNavigate(item) {
      if (item.disabled) {
        return;
      }
      if (!uni.getStorageSync("userInfo")) {
        uni.showModal({
          title: "您还未登陆,请先登陆后使用",
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: "../login/login",
              });
            }
          },
        });
        return;
      }
      if (uni.getStorageSync("userInfo").checkStatus != 2) {
        uni.showModal({
          title: "您的审批暂未通过，无法使用此功能",
        });
      } else {
        uni.navigateTo({
          url: item.navigateTo,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home-navigator {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  padding: 32rpx 0;
  grid-row-gap: 32rpx;
  font-size: 28rpx;
  color: #333333;

  .list-item {
    text-align: center;

    image {
      width: 74rpx;
      height: 74rpx;
    }

    image.disabled {
      filter: grayscale(100%);
    }
  }
}
</style>